<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <script src="/kissy/build/seed-debug.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <script src="/kissy/src/log.js"></script>
</head>
<body>

<h1>open in ios safari test pinch event</h1>
<style>
    .hint-v {
        padding: 10px;
        padding-top: 150px;
        text-align: center;
        vertical-align: middle;
        position: fixed;
        height: 100%;
        width: 50px;
        background: red;
        opacity: 0.5;
        top: 0;
    }

    .hint-h {
        padding: 10px;
        text-align: center;
        vertical-align: middle;
        position: fixed;
        width: 100%;
        height: 50px;
        background: red;
        opacity: 0.5;
        left: 0
    }

    .slide-bar {
        position: fixed;
        background-color: #ffff00;
    }

    .slide-bar-horizonal {
        width: 100%;
        height: 10000px;
        left: 0;
    }

    .slide-bar-vertical {
        height: 100%;
        width: 10000px;
        top: 0;
    }

    #h {
        right: -99999px;
    }

    #hr {
        text-align: right;
        left: -99999px;
    }

    #v {
        bottom: -99999px;
    }

    #vb {
        top: -99999px;
    }
</style>

<button style="position: fixed;top:50%;left:50%;" id="debug">debug</button>

<!--
bug in ios if native scroll exists
<div style="height: 1000px">
</div>
-->

<div class="hint-h" style="top: 0">drag down</div>
<div class="hint-h" style="bottom: 0"><a href="http://m.taobao.com">drag up</a></div>
<div class="hint-v" style="left: 0">drag right</div>
<div class="hint-v" style="right: 0">drag left</div>

<div class="slide-bar slide-bar-vertical" id="h">right bar</div>
<div class="slide-bar slide-bar-vertical" id="hr">left bar</div>
<div class="slide-bar slide-bar-horizonal" id="v">
    <div>bottom bar</div>
</div>
<div class="slide-bar slide-bar-horizonal" id="vb">
    <div style="position: absolute; bottom: 0">top bar</div>
</div>
<script>
    KISSY.use('util,node,event/gesture/tap,event/gesture/edge-pan', function (S, util,
                                                                               Node, TapGesture, EdgePanGesture) {
        var $ = Node.all;
        var win = $(win);
        var TAP = TapGesture.TAP;
        var h = $('#h');
        var hr = $('#hr');
        var v = $('#v');
        var vb = $('#vb');
        var max = 100;
        var unlimit = 10000;
        var map = {
            left: h,
            right: hr,
            up: v,
            down: vb
        };

        $('#debug').on('click', function () {
            alert(window.innerHeight + ' : ' + window.pageYOffset);
        });

        var directionToCss = {
            left: 'right',
            right: 'left',
            down: 'top',
            up: 'bottom'
        };

        h.on(TAP, function (e) {
            h.animate({
                right: '-' + h.width() + 'px'
            }, {
                duration: 0.2,
                complete: function () {
                    h.active = 0;
                }
            });
            e.preventDefault();
        });

        hr.on(TAP, function (e) {
            hr.animate({
                left: '-' + h.width() + 'px'
            }, {
                duration: 0.2,
                complete: function () {
                    hr.active = 0;
                }
            });
            e.preventDefault();
        });

        v.on(TAP, function (e) {
            v.animate({
                bottom: '-' + v.height() + 'px'
            }, {
                duration: 0.2,
                complete: function () {
                    v.active = 0;
                }
            });
            e.preventDefault();
        });

        vb.on(TAP, function (e) {
            vb.animate({
                top: '-' + vb.height() + 'px'
            }, {
                duration: 0.2,
                complete: function () {
                    vb.active = 0;
                }
            });
            e.preventDefault();
        });

        util.each(map, function (node, direction) {
            node.direction = direction;
        });

        $(window).on(EdgePanGesture.EDGE_PAN, function (e) {
            var direction = e.direction;
            var node = map[direction];
            e.preventDefault();
            if (node.active) {
                return;
            }

            if (direction === 'left') {
                node.css('right', window.innerWidth + window.pageXOffset - e.pageX - node.width());
            } else if (direction === 'right') {
                node.css('left', e.pageX - window.pageXOffset - node.width());
            } else if (direction === 'up') {
                node.css('bottom', window.innerHeight + window.pageYOffset - e.pageY - node.height());
            } else if (direction === 'down') {
                node.css('top', e.pageY - window.pageYOffset - node.height());
            }

        });

        var factor = 4;

        $(window).on(EdgePanGesture.EDGE_PAN_END, function (e) {
            var direction = e.direction;
            var node = map[direction];
            if (node.active) {
                return;
            }
            node.active = 1;
            var destinedProperty = directionToCss[direction];
            var destinedValue = max - unlimit;
            var currentValue = parseInt(node.css(destinedProperty));
            if (destinedValue === currentValue) {
                return;
            }
            var velocity = Math.abs(e.velocityX);
            if (direction === 'down' || direction === 'up') {
                velocity = Math.abs(e.velocityY);
            }
            var time = velocity / factor;
            var anim = {};
            anim[destinedProperty] = destinedValue;
            node.animate(anim, {
                duration: time
            });
            e.preventDefault();
        });
    });
</script>
</body>
</html>